<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓深科技</title>
<#include "./css.ftl">
    <style>
        .table>tbody>tr>td{
            text-align:center;
        }
        .table>thead:first-child>tr:first-child>th{
            text-align:center;
        }
        .changeColor a:hover{
            color: black;
            cursor:pointer;
        }

        .carousel-control{
            width: 4%;;
        }
    </style>
</head>
<body>
<div id="wrapper">

<#include "./left_nav.ftl">

    <div id="page-wrapper" class="gray-bg dashbard-1">
    <#include "./top_nav.ftl">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-2 ">
                    <div class="widget style1 label-danger">
                        <div class="row">
                            <div class="col-xs-4">
                                <i class="fa fa-warning fa-5x"></i>
                            </div>
                            <div class="col-xs-8 text-right">
                                <span>未处理报警事件</span>
                                <h2 class="font-bold"  id="monthIgnoreAlarm">0</h2>
                            </div>
                        </div>
                    </div>
                    <div class="widget style1 label-warning">
                        <div class="row">
                            <div class="col-xs-4">
                                <i class="fa fa-volume-up fa-5x"></i>
                            </div>
                            <div class="col-xs-8 text-right">
                                <span>最近1月报警次数</span>
                                <h2 class="font-bold" id="monthAlarm">0</h2>
                            </div>
                        </div>
                    </div>
                    <div class="">
                        <div class="panel panel-primary" style="padding: 0 0 0 0">
                            <div class="panel-heading" >
                                <h4><b>当前设备</b></h4>
                            </div>
                            <div class="panel-body" style="padding: 0 0 0 0">
                                <table id="eq_table" class="table table-striped table-bordered table-hover " cellspacing="0" width="100%" >
                                    <thead>
                                    <tr>
                                        <th>报警主机</th>
                                    </tr>
                                    </thead>
                                    <tbody id="eq_table_tbody">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div  class="col-lg-10">
                    <div  style="border: none;height: 850px;">
                        <div id="carousel-example-generic" class="carousel slide" data-interval="false" align="center" style="width: 100%;height: 100%;text-align: center">
                            <ol id="carouselIndicators" class="carousel-indicators" >

                            </ol>
                            <div id="iPicture" class="carousel-inner"style="width: 100%;height: 100%">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <#include "./bottom_nav.ftl">
    </div>

</div>


<#include "./js.ftl">

<script>

    var server = "http://"+getURL()+"${baseURL}";
    var monitorTable
    var imgs = new Array();
    var locationData = new Array();
    var ignoreAlarmLocalId = new Array();
    $(function () {
        socketInit(server.substring(5));
        initmonitorTable();
        getIgnoreAlarm();
        getMainMap();
        ReadRouterTable();
        gitAlarmNum();
        //window.onload = checkAlert(server);
        setInterval("ReadRouterTable()","5000");
    });
    function getMainMap() {
        $.ajax({
            url:  "${baseURL}/xkGeoLocation/getTree",
            success:function (data) {
                var jsonObj = data;
                for(var i in jsonObj.data){
                    var level1 = jsonObj.data;
                    var obj = {
                        Map_id : level1[i].id,
                        Map_name : level1[i].name,
                    };
                    var ii = 0;
                    var level1Obj = {
                        text:level1[i].name,
                        id:level1[i].id,
                        value:ii++,
                        level:1,
                        parentId:0,
                    };
                    if(level1[i].children != null)
                    {
                        var level2 = level1[i].children;
                        var level2Arr = [];
                        var jj = 0;
                        for(var j in level2){
                            var level2Obj = {
                                text: level2[j].name,
                                id: level2[j].id,
                                value:jj++,
                                parentId:level1[i].id,
                                posX:level2[j].posX,
                                posY:level2[j].posY,
                                level:2,
                            };
                            if(level2[j].children != null)
                            {
                                var level3 = level2[j].children;
                                var level3Arr = [];
                                for(var k in level3){
                                    var level3Obj = {
                                        text: level3[k].name,
                                        id: level3[k].id,
                                        level:3,
                                        parentId:level2[j].id,
                                    };
                                    level3Arr.push(level3Obj);
                                }
                                level2Obj .children = level3Arr;
                            }
                            level2Arr.push(level2Obj);
                        }
                        level1Obj.children = level2Arr;
                    }
                    locationData.push(level1Obj);

                    if(i == 0){
                        $('#carouselIndicators').append(
                                '<li data-target="#carousel-example-generic" data-slide-to='+i+' class="active"style="background-color: yellow"></li>'
                        );
                    }else{
                        $('#carouselIndicators').append(
                                '<li data-target="#carousel-example-generic" data-slide-to='+i+' class="" style="background-color: yellow"></li>'
                        );
                    }
                    imgs.push(obj);
                }
                eachImg(imgs.length-1);
                $('#carousel-example-generic').append(
                        '<a class="left carousel-control"  href="#carousel-example-generic" style="background-color: #dddddd" data-slide="prev">'+
                        '<span class="fa fa-angle-double-left fa-4x"style="margin-top: 400px;color: black;"></span>'+
                        '</a>'+
                        '<a class="right carousel-control"href="#carousel-example-generic" style="background-color: #dddddd" data-slide="next">'+
                        '<span class="fa fa-angle-double-right fa-4x" style="margin-top: 400px;color: black;"></span>'+
                        '</a>'
                );
            }
        });
    }
    function eachImg(i){
        var j = i-1;
        if(i == 0){
            $('#iPicture').append(
                    '<div class="item  active" align="center" style="width: 100%;height: 100%"><div id='+"iPicture"+imgs[i].Map_id+' style="width: 100%;height: 100%"><div class="ip_slide" id='+"map_div"+imgs[i].Map_id+' style="width: 100%;height: 100%">'+
                    '<img src='+server+"/xkGeoLocationMap/mapDownload?id="+imgs[i].Map_id+' id='+"Img"+imgs[i].Map_id+' alt='+imgs[i].Map_name+' style="width: 100%;height: 100%" onload="eachImg('+j+')" onerror="errorImg('+i+')">'+
                    '</div></div>'+
                    '<div class="carousel-caption" style="color: yellow;font-size: 24px;font-weight: bolder ">'+imgs[i].Map_name+'</div>'+
                    '</div>'
            );
            Readlocation(i);
        }else if(i<imgs.length && i>0){
            $('#iPicture').append(
                    '<div class="item " align="center" style="width: 100%;height: 100%"><div id='+"iPicture"+imgs[i].Map_id+' style="width: 100%;height: 100%"><div class="ip_slide" id='+"map_div"+imgs[i].Map_id+' style="width: 100%;height: 100%">'+
                    '<img src='+server+"/xkGeoLocationMap/mapDownload?id="+imgs[i].Map_id+' id='+"Img"+imgs[i].Map_id+' alt='+imgs[i].Map_name+ ' style="width: 100%;height: 100%" onload="eachImg('+j+')" onerror="errorImg('+i+')">'+
                    '</div></div>'+
                    '<div class="carousel-caption" style="color: yellow;font-size: 24px;font-weight: bolder ">'+imgs[i].Map_name+'</div>'+
                    '</div>'
            );
            Readlocation(i);
        }else {
            $( "#iPicture" ).iPicture({});
            return 1;
        }
    }
    function errorImg(i){
        var j = i+1;
        id = "#Img"+imgs[i].Map_id;
        $(id).attr("src","${baseURL}/assets/地图加载失败页2.jpg");
    }
    function ReadRouterTable() {
        monitorTable.ajax.reload();
//        后期弄推送，前端不停的请求刷新性能损失太大
    }

    function initmonitorTable() {
         monitorTable = $('#eq_table').DataTable({
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            ajax: "${baseURL}/xkDevice/getAll",
            columns:[
                {"data":"name","render":function(data, type, row, meta){
                    if(row.status == 1){
                        return"<span style='color: limegreen'>" + data + "</span>";
                    }else {
                        return"<span style='color: red'>" + data + "</span>";
                    }
                }}
            ],
            destroy: true,
            paging: false,
            searching:false,
            info:false
        });
    }

    function Readlocation(i){
        var showType = "ltr-slide";
        var showColor = "roundBgG";
        var buildFlag;
        var floorFlag;
        for(var j in locationData[i].children){
            buildFlag = 0;
            for(var build_j in ignoreAlarmLocalId){
                if(locationData[i].children[j].id == ignoreAlarmLocalId[build_j].build){
                    buildFlag = 1;
                    break;
                }
            }
            if(buildFlag){
                var x = (parseFloat(locationData[i].children[j].posX) * 100);
                var y = (parseFloat(locationData[i].children[j].posY) * 100);
                if(x>50&&y<50){
                    showType = "rtl-slide";
                }else if(x<50&&y>50){
                    showType = "btt-slide";
                }else if(x>50&&y>50){
                    showType = "btt-slide";
                }
                x = x>0?x+'%':0;
                y = y>0?y+'%':0;
                var divs =  "";
                divs ='<div class="ip_tooltip ip_img32" style="top: '+y+'; left: '+x+';z-index: 100;" data-tooltipbg="bgwhite" data-round="roundBgR"  data-animationtype="'+showType+'" >' +
                        '<div class="row" style="height: auto;width: 100px;margin: auto">' +
                        '   <div class="box box-primary box-solid">' +
                        '       <div class="box-header"><h4>'+locationData[i].children[j].text+'</h4></div>' +
                        '       <div class="box-body">' +
                        '           <table class="table table-bordered table-striped">' +
                        '               <tbody id="'+locationData[i].children[j].text+'">' +
                        '               </tbody>' +
                        '           </table>' +
                        '       </div>' +
                        '       </div>' +
                        '   </div>' +
                        '</div>';
                $("#map_div"+imgs[i].Map_id).append(divs);

                var tr ="";
                for(var k in locationData[i].children[j].children){
                    floorFlag = 0;
                    for(var floor_id in ignoreAlarmLocalId){
                        if(locationData[i].children[j].children[k].id == ignoreAlarmLocalId[floor_id].floor){
                            floorFlag = 1;
                            break;
                        }
                    }
                    if(floorFlag){
                        tr += "<tr><td class='changeColor' style='border: solid;'><a  onclick=changePage('"+locationData[i].children[j].children[k].id+"','"+locationData[i].children[j].children[k].text+"') ><span style='color: red'>" + locationData[i].children[j].children[k].text +"</span></a></td><tr>"
                    }else{
                        tr += "<tr><td class='changeColor'><a  onclick=changePage('"+locationData[i].children[j].children[k].id+"','"+locationData[i].children[j].children[k].text+"')>" + locationData[i].children[j].children[k].text +"</a></td><tr>"
                    }
                }
                $("#"+locationData[i].children[j].text).append(tr);
            }else {
                var x = (parseFloat(locationData[i].children[j].posX) * 100);
                var y = (parseFloat(locationData[i].children[j].posY) * 100);
                if(x>50&&y<50){
                    showType = "rtl-slide";
                }else if(x<50&&y>50){
                    showType = "btt-slide";
                }else if(x>50&&y>50){
                    showType = "btt-slide";
                }
                x = x>0?x+'%':0;
                y = y>0?y+'%':0;
                var divs =  "";
                divs ='<div class="ip_tooltip ip_img32" style="top: '+y+'; left: '+x+';z-index: 100;" data-tooltipbg="bgwhite" data-round="'+showColor+'"  data-animationtype="'+showType+'" >' +
                        '<div class="row" style="height: auto;width: 100px;margin: auto">' +
                        '   <div class="box box-primary box-solid">' +
                        '       <div class="box-header"><h4>'+locationData[i].children[j].text+'</h4></div>' +
                        '       <div class="box-body">' +
                        '           <table class="table table-bordered table-striped">' +
                        '               <tbody id="'+locationData[i].children[j].text+'">' +
                        '               </tbody>' +
                        '           </table>' +
                        '       </div>' +
                        '       </div>' +
                        '   </div>' +
                        '</div>';
                $("#map_div"+imgs[i].Map_id).append(divs);

                var tr ="";
                for(var k in locationData[i].children[j].children){
                    tr += "<tr><td class='changeColor'><a onclick=changePage('"+locationData[i].children[j].children[k].id+"','"+locationData[i].children[j].children[k].text+"')>" + locationData[i].children[j].children[k].text +"</a></td><tr>"
                }
                $("#"+locationData[i].children[j].text).append(tr);
            }
        }
    }
    function changePage(id,name){
        var contant = "map_show.html?mapId=" + id + "&name=" + name
        location.href=encodeURI(contant);
    }
    function getIgnoreAlarm(){
        $.ajax({
            url:"${baseURL}/alarm/getAllIgnore" ,
            async:false,
            success:function (data_in) {
                var json = data_in.data;
                for(var i in json){
                    var LocationId = {
                        area:json[i].geo_1_id,
                        build: json[i].geo_2_id,
                        floor:json[i].geo_3_id,
                    }
                    ignoreAlarmLocalId.push(LocationId);
                }
            }
        });
    }
    function gitAlarmNum(){
        $.ajax({
            url:"${baseURL}/alarm/getOneMonthAll" ,
            async:false,
            success:function (data_in) {
                var json = data_in.number;
                $("#monthAlarm").html(json);
            }
        });
        $.ajax({
            url:"${baseURL}/alarm/getAllIgnoreCount" ,
            async:false,
            success:function (data_in) {
                var json = data_in.number;
                $("#monthIgnoreAlarm").html(json);
            }
        });
    }

</script>
</body>
</html>